<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <div>
      <el-input class="address" v-model="address" placeholder="请输入地址来直接查找相关位置" />
      <baidu-map
        id="allmap"
        :scroll-wheel-zoom="true"
        :center="center"
        :zoom="zoom"
        :ak="baiduAk"
        @ready="getLocationPoint"
        @click="searchcomplete"
      >
        <bm-view class="map" />
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
        <!--        <bm-local-search :keyword="addressKeyword" :select-first-result="false" :location="location" :auto-viewport="false" style="display: none" />-->
        <bm-marker :position="center" :dragging="false" :icon="{url: positoin, size: {width: 30, height: 30}}" @click="show = true">
          <bm-info-window :show="show" @close="show = false" @open="show = true">{{ addressKeyword }}</bm-info-window>
        </bm-marker>
      </baidu-map>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleComfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import positoin from '@/assets/positoin.png'
import { BaiduMap, BmGeolocation, BmView, BmMarker, BmInfoWindow } from 'vue-baidu-map'
import { mapState } from 'vuex'
// import  from 'vue-baidu-map/components/map/MapView.vue'
// import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
export default {
  name: 'Map',
  components: {
    BaiduMap,
    BmView,
    // BmLocalSearch,
    BmGeolocation,
    BmMarker,
    BmInfoWindow
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    location: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 地址关键字
      address: '',
      // 经纬度
      center: { lng: 0, lat: 0 },
      // 缩放等级
      zoom: 20,
      positoin,
      show: false // 显示地址框
    }
  },
  computed: {
    addressKeyword() {
      return this.location
    },
    ...mapState({
      baiduAk: state => state.basicInfo.baiduAk // 百度key
    })
  },
  methods: {
    getLocationPoint({ BMap, map }, e) {
      /* 创建地址解析器的实例 */
      const geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, (point) => {
        this.center.lng = Number(point.lng.toFixed(6))
        this.center.lat = Number(point.lat.toFixed(6))
      })
    },
    // 获取标注点
    searchcomplete(e) {
      const geoCoder = new BMap.Geocoder()
      geoCoder.getLocation(e.point, (res) => {
        console.log(res)
        this.address = res.address
        this.center.lat = Number(res.point.lat.toFixed(6))
        this.center.lng = Number(res.point.lng.toFixed(6))
      })
    },
    // 保存弹窗
    handleComfirm() {
      // 返回经纬度
      this.$emit('getPointInfo', {
        x1: this.center.lng,
        y1: this.center.lat,
        address: this.address
      })
      this.$nextTick(() => {
        this.address = ''
      })
    },
    // 关闭弹窗
    handleClose() {
      this.$emit('cancelDialog', false)
    }
  }
}
</script>

<style scoped>
/* 设定地图的大小 */
#allmap {
  height: 50vh;
  width: 100%;
  overflow-y: scroll;
}
.map {
  width: 100%;
  height:50vh;
  flex: 1
}
.address {
  width: 300px;
  position: relative;
  top: 50px;
  left: 30px;
  z-index: 9999;
  background: #0c2c55;
}
</style>
